<template>
  <div class="search">
    <van-search
      background="#F4F6FA"
      v-model="keyword"
      placeholder="请输入搜索关键词"
      @click-left-icon="onSearch(keyword)"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";
const keyword = ref("");
const router = useRouter();
const onSearch = (keyword) => {
  if (keyword == "") {
    showToast("搜索内容不能为空")
    return;
  }
  router.push({
    path: "/search",
    query: {
      value: keyword,
    },
  });
};
</script>
<style lang="scss" scoped>
.search {
  height: 52px;
  background: #f4f6fa;
  border-radius: 12px;
  overflow: hidden;
  ::v-deep .van-search__content {
    background: transparent;
  }
}
</style>
